<template>
  <div class="loss-upload-container">
    <el-card class="upload-card" shadow="hover">
      <!-- 页面标题 -->
      <div class="card-title">损失损害上传</div>

      <!-- 文件上传区域 -->
      <div class="upload-area">
        <!-- 文件选取组件（Element Upload） -->
        <el-upload
          ref="uploadRef"
          :auto-upload="false"
          :before-upload="handleBeforeUpload"
          :on-change="handleFileChange"
          :file-list="fileList"
          class="select-file-btn"
        >
          <el-button type="primary">选取文件</el-button>
        </el-upload>

        <!-- 格式/大小提示（红色文字） -->
        <span class="upload-tip">请上传大小不超过10MB 格式为doc/pdf的文件</span>

        <!-- 更新文件按钮（文件选取后可点击） -->
        <el-button
          type="primary"
          class="update-file-btn"
          @click="handleUpdateFile"
          :disabled="!selectedFile"
        >
          更新文件
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "LossDamageUpload", // 组件名称
  data() {
    return {
      fileList: [], // 上传组件的文件列表
      selectedFile: null, // 已选取的文件（存储原始文件对象）
    };
  },
  methods: {
    // 文件上传前校验（格式+大小）
    handleBeforeUpload(file) {
      // 1. 校验文件格式
      const allowedExt = ["doc", "docx", "pdf"];
      const fileExt = file.name.split(".").pop().toLowerCase();
      if (!allowedExt.includes(fileExt)) {
        this.$message.error("请上传doc、docx或pdf格式的文件");
        return false; // 阻止文件上传
      }

      // 2. 校验文件大小（不超过10MB）
      const maxSize = 10 * 1024 * 1024; // 10MB
      if (file.size > maxSize) {
        this.$message.error("文件大小不能超过10MB");
        return false; // 阻止文件上传
      }

      return true;
    },

    // 文件选取后更新状态
    handleFileChange(file) {
      this.selectedFile = file.raw; // 存储原始文件对象
    },

    // 点击“更新文件”重新选取文件
    handleUpdateFile() {
      // 触发上传组件的“选取文件”按钮点击
      this.$refs.uploadRef.$el.querySelector(".el-upload__input").click();
    },
  },
};
</script>

<style lang="scss" scoped>
.loss-upload-container {
  padding: 15px;
  background-color: #f9f9f9;
  min-height: calc(100vh - 20px);

  .upload-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 20px;
    width: 100%;
    max-width: 600px; // 限制卡片宽度，匹配截图视觉

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ebeef5;
    }

    .upload-area {
      display: flex;
      flex-direction: column;
      gap: 10px;

      // 选取文件按钮样式
      .select-file-btn .el-button {
        width: fit-content;
      }

      // 提示文字样式（红色）
      .upload-tip {
        color: #f56c6c;
        font-size: 12px;
      }

      // 更新文件按钮样式
      .update-file-btn {
        width: fit-content;
      }
    }
  }
}
</style>
